<template>
	<view class="wrapper">
		<head-title titleText="发布动态" showLeftButton="true" statusColor="linear-gradient(to right,#AE33F6,#6673FF)"></head-title>
		<form @submit="bindSubmit">
			<view class="cont">
				<textarea name="contTxt" class="text" placeholder-class="pla" placeholder="记录一下此刻的心情..."></textarea>
				<view v-if="imgList.length<1" @tap="bindAdd" class="btnActive addtxt">添加照片</view>
			</view>
			<!-- 添加图片 -->
			<view class="addPic flex_row">
				<view @tap="clearPic(index)" class="btnActive" v-for="(item,index) in imgList" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</view>
				<view @tap="bindAdd" v-if="imgList.length==1||imgList.length==2" hover-class="bindhover" class="btnActive add flex_col"><image src="../../static/image/addPic.png" mode="aspectFill"></image></view>
			</view>
			<!-- 发布 -->
			<button form-type="submit" class="publish flex_row" type="default">
				<image src="../../static/image/fb.png"></image>
				<text>发布</text>
			</button>
		</form>
	</view>
</template>
<script>
	import headTitle from "../../components/headTitle.vue";
	import common from "../../common/network.js";
	var session = '',imgArr = [];
	export default {
		components:{headTitle},
		data(){
			return{
				imgList:[],limit:1,
			}
		},
		onLoad:function(options){
			if(options.session!=undefined){
				session = options.session;
				imgArr = [];
			}
// 			common.network.getStorage('userinfo',function(data){
// 				console.log(data);
// 				session = data.session;
// 			})
			
		},
		methods:{
			bindAdd:function(){//添加图片,
				var that = this;
				if(typeof (imgArr)=='string'){
					imgArr= imgArr.split(',');
				}	
				uni.chooseImage({
					count:1,
					sizeType:['compressed'],
					success:function(e){
						var arr = e.tempFilePaths;
						var imgSrc = arr[0];
						that.uploadImg(imgSrc);
						that.imgList.push(imgSrc);
					}
				})
			},
			uploadImg:function(src){
				var that = this;
				uni.uploadFile({
					url: 'https://yp.6vx.com/?m=Jke',
					filePath: src,
					name:'file',
					formData:{
						type:'zupload_upload_img',
						session:session
					},
					success:function(res){
						var imgs = JSON.parse(res.data);
						var src = imgs.data
						setTimeout(function(){
							imgArr.push(src);
						},100)
					}
				})
			},
			clearPic:function(index){
				var that = this;
				var arr = that.imgList;
				if(typeof (imgArr)=='string'){
					imgArr= imgArr.split(',');
				}	
				uni.showModal({
					confirmColor:"#6673FF",
					content:"您要删除这张照片吗？",
					success:function(res){
						if(res.confirm){
							imgArr.splice(index,1);
							arr.splice(index,1);
							that.imgList = arr;
						}
					}
				})
			},
			bindSubmit:function(e){
				var that = this;
				var contTxt = e.detail.value.contTxt;
				console.log(imgArr);
				if(typeof (imgArr)=='object'){
					imgArr= imgArr.join(',');
				}	
				console.log(imgArr)
				if(contTxt!=''){
					if(that.limit==1){
						that.limit = 0;
						var $data = {
							'type':'zcommunity_ins_community',
							'session': session,
							'c_content':encodeURI(contTxt),
							'c_img':imgArr
						}
						common.network.request($data,function(res){
							console.log(res);
							uni.showToast({
								icon:'success',
								title: '发布成功',
								success:function(){
									uni.setStorage({
										key: 'trendList',
										data: res
									})
									setTimeout(function(){
										that.limit = 1;
										uni.navigateBack({
											
										})
									},1500)
								}
							})
						})
					}else{
						return false;
					}
					
				}else{
					uni.showModal({
						content:'说几句更吸引别人注意',
						showCancel:false,
						confirmText:'知道了',
						confirmColor:'#6673FF'
					})
				}
			}
		}
	}
</script>

<style scoped>
	.wrapper{
		min-height: 100vh;
		background: #F9F9F9;
	}
	.cont{
		background: #fff;
		padding: 30px;
		padding-bottom: 0;
	}
	.text{
		font-size: 28px;
		height: 200px;
		width: 100%;
	}
	.addtxt{
		text-align: right;
		padding: 26px 0;
		color: #6278FF;
	}
	.addPic{
		padding: 30px;
	}
	.addPic view{
		width: 30.8%;
		height: 210px;
		background: #fff;
		border-radius: 8px;
		margin-right: 3.8%;
		overflow: hidden;
	}
	.addPic view:active{
		box-shadow: 0 0 10px rgba(0,0,0,0.1);
	}
	.addPic view:last-of-type{
		margin-right: 0;
	}
	.addPic view image{
		width: 100%;
		height: 100%;
		border-radius: 8px;
	}
	.addPic view.add{
		justify-content: center;
	}
	.addPic view.add image{
		width: 70px;
		height: 70px;
	}
	button.publish{
		border-radius: 0;
		background: linear-gradient(to right,#6E6CFD,#A23CF5);
		color: #fff;
		font-size: 34px;
		justify-content: center;
		width: 80%;
		margin: auto;
		margin-top: 50px;
		line-height: 2.8;
		border-radius: 100px;
	}
	button.publish:active{
		background: linear-gradient(to right,#A23CF5,#6E6CFD);
		transition: all 0.4s; 
	}
	.publish image{
		width: 32px;
		height: 32px;
		margin-right: 20px;
	}
</style>
